<template>
  <el-drawer
    title="代驾记录列表"
    :visible.sync="visible"
    size="70%"
    :before-close="close"
    :modal="false"
  >
    <div class="table-padding">
      <el-form
        :model="queryParamsOrder"
        ref="queryOrderForm"
        :inline="true"
        class="search"
        label-width="80px"
      >
<!--        <el-form-item label="订单编号" prop="orderNo">-->
<!--          <el-input-->
<!--            v-model="queryParamsOrder.orderNo"-->
<!--            clearable-->
<!--            style="width: 220px"-->
<!--            placeholder="请输入订单编号"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="司机名称" prop="driverName">
          <el-input
            v-model="queryParamsOrder.driverName"
            clearable
            style="width: 220px"
            placeholder="请输入司机名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="refreshList"
          >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetList"
          >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table v-loading="loadingOrderDrawer" :data="orderList" border>
        <el-table-column
          label="订单号"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            {{ row.orderNo }}
          </template>
        </el-table-column>
        <el-table-column
          label="车牌号"
          min-width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span>{{row.carNo||'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="司机名称"
          min-width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span>{{row.driverName||'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="代驾时长"
          min-width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span>{{row.drivingDuration||'--'}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="客户名称"
          min-width="130"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
              <span>{{ row.memberName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="预计取还时间"
          min-width="180"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
              <span style="color: #d9001b">取：{{ row.rentalStartTime }}</span
              >&nbsp;&nbsp;&nbsp;
            <span style="color: #dd5d1b">还：{{ row.rentalEndTime }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="车型名称"
          min-width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span>{{ row.modelName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="left"
          class-name="small-padding fixed-width"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleOrderUpdate(scope.row)"
            >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalOrder > 0"
        :total="totalOrder"
        :page.sync="queryParamsOrder.pageNum"
        :limit.sync="queryParamsOrder.pageSize"
        @pagination="getOrderList"
      />
    </div>
  </el-drawer>
</template>

<script>
import {orderRecordsVoList} from "@/api/bills/records";

export default {
  components: {},
  data() {
    // 这里存放数据
    return {
      visible:false,
      loadingOrderDrawer:false,
      orderList:[],
      totalOrder :0,
      queryParamsOrder: {
        pageNum: 1,
        pageSize: 10,
        orderNo:'',
        driverName:''
      },
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
  },
  // 方法集合
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParamsOrder.pageNum = 1;
      this.getOrderList();
    },
    show(){
      this.visible = true;
      this.refreshList();

    },
    close(){
      this.visible= false;
    },
    handleOrderUpdate(order){
      this.$emit('success', order);
      this.close();
    },
    refreshList(){
      this.queryParamsOrder.pageNum = 1;
      this.getOrderList();
    },
    resetList(){
      this.$refs.queryOrderForm.resetFields();
      this.refreshList();
    },
    getOrderList(){
      this.loadingOrderDrawer = true;
      orderRecordsVoList(this.queryParamsOrder).then(res=>{
        this.loadingOrderDrawer = false;
        this.orderList = res.rows;
        this.totalOrder = res.total;
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {

  },

}
</script>

<style lang="scss" scoped>
</style>
